<template>
  <el-sub-menu :index="props.index">
    <template #title>影像加载</template>
    <el-menu-item index="1-1" @click="googleEarthMap">谷歌地球影像</el-menu-item>
    <el-menu-item index="1-2" @click="webMapService">WEB地图</el-menu-item>
    <el-menu-item index="1-3" @click="wmsMapService">WMS地图</el-menu-item>
    <el-menu-item index="1-4" @click="wmtsMapService">WMTS地图</el-menu-item>
    <el-menu-item index="1-5" @click="IonImageryProvider">Ion影像</el-menu-item>
  </el-sub-menu>
</template>

<script setup>
import * as Cesium from 'cesium'
import { useCesiumStore } from '@/stores/cesiumStore'

// 定义props
const props = defineProps({
  index: {
    type: String,
    required: true,
  },
})

// 使用 Cesium Store
const cesiumStore = useCesiumStore()

//谷歌地球影像
//#region
//GoogleEarthEnterpriseMetadata  使用 Google Earth Enterprise REST API 提供元数据
// fromUrl 托管图像的 Google Earth Enterprise 服务器的网址
const googleEarthMap = async () => {
  const geeMetadata = await Cesium.GoogleEarthEnterpriseMetadata.fromUrl('https://kh.google.com')
  //GoogleEarthEnterpriseImageryProvider  使用 Google Earth Enterprise REST API 提供切片影像
  //fromMetadata(     metadata,     options )
  //metadata 一个元数据对象，可用于与 GoogleEarthEnterpriseTerrainProvider 共享元数据请求   options描述初始化选项的对象。
  const gee = Cesium.GoogleEarthEnterpriseImageryProvider.fromMetadata(geeMetadata)
  cesiumStore.viewerCesium.imageryLayers.addImageryProvider(gee)
}
//#endregion

//ion影像 资产 ID
const IonImageryProvider = async () => {
  const imgLayer = await Cesium.IonImageryProvider.fromAssetId(3)
  cesiumStore.viewerCesium.imageryLayers.addImageryProvider(imgLayer)
}

//UrlTemplateImageryProvider 加载常见的WEB地图 通过使用指定的 URL 模板请求切片来提供图像
const webMapService = () => {
  // UrlTemplateImageryProvider 通过使用指定的 URL 模板请求切片来提供图像。
  const imgLayer = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    minimumLevel: 0, //影像提供商支持的最低细节层次。
    maximumLevel: 18, //影像提供商支持的最大细节层次
  })
  cesiumStore.viewerCesium.imageryLayers.addImageryProvider(imgLayer)
}

//WebMapServiceImageryProvider  提供由 Web 地图服务 （WMS） 服务器托管的切片影像。
const wmsMapService = () => {
  const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: 'https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer',
    layers: '0',
    proxy: new Cesium.DefaultProxy('/proxy/'),
    parameters: {
      //在 GetMap URL 中传递给 WMS 服务器的附加参数。
      transparent: true, //务必设为true。否则不显示底图
      format: 'image/png',
      srs: 'EPSG:4326',
    },
    //如果为 false， WebMapServiceImageryProvider#pickFeatures将立即返回 undefined（表示没有可选功能）而不与服务器通信。
    enablePickFeatures: true,
  })
  cesiumStore.viewerCesium.imageryLayers.addImageryProvider(wmsImageryProvider)
}

//WebMapTileServiceImageryProvider  提供由 WMTS 1.0.0 兼容服务器提供的切片影像。此提供程序支持 HTTP KVP 编码和 RESTful GetTile 请求，但尚不支持 SOAP 编码。
const wmtsMapService = () => {
  // Example 1. USGS shaded relief tiles (KVP)
  const imgLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
    layer: 'USGSShadedReliefOnly',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'default028mm',
    // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
    maximumLevel: 19,
    credit: new Cesium.Credit('U. S. Geological Survey'),
  })
  cesiumStore.viewerCesium.imageryLayers.addImageryProvider(imgLayer)
}
</script>
